// 这是纯粹的UI展示组件
interface User {
  id: number;
  name: string;
  email: string;
  website: string;
}

interface UserDisplayCardProps {
  user: User;
}

export default function UserDisplayCardPropd({ user }: UserDisplayCardProps) {
  return (
    // 使用 Tailwind CSS 样式
    <div className=" p-8 bg-white shadow-lg rounded-xl max-w-lg  mx-auto  mt-10 ">
      <h1 className="text-3xl font-bold  mb-4 text-blue-700">
        用户档案：{user.name}
      </h1>
      <div className="border-t pt-4 space-y-3">
        <p className="flex  items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">ID:</strong>
          <span className="ml-2">{user.id}</span>
        </p>
        <p className="flex  items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-90">Email:</strong>
          <span>{user.email}</span>
        </p>

        <p className="flex  items-center text-gray-700">
          <strong className="w-20 font-semibold text-gray-900">网站:</strong>
          <a
            href={`http://${user.website}`}
            target="_blank"
            rel="noopener noreferrer"
            className="ml-2  text-green-600 hover:underline"
          >
            {user.website}
          </a>
        </p>
      </div>
    </div>
  );
}
